<template>
  <div id="app">
    <Modal
      v-model="showModal"
      title="验证treeSelect插件"
      :loading="loading"
      :mask-closable="false"
      @on-ok="checkForm"
    >
      <div>
        <Form ref="queryForm" :model="queryForm" :rules="queryFormRule">
          <FormItem label="验证treeSelect多选" prop="queryVal2">
            <selectTree v-model="queryForm.queryVal2" multiple :treeData="treeData"></selectTree>
          </FormItem>
          <FormItem label="验证treeSelect单选" prop="queryVal1">
            <selectTree v-model="queryForm.queryVal1" clearable :treeData="treeDataNew"></selectTree>
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<script>
import selectTree from "iview-select-tree";
import axios from "axios";

export default {
  name: "App",
  components: {
    selectTree
  },
  data() {
    return {
      loading: true,
      showModal: true,
      queryForm: {
        queryVal1: "",
        queryVal2: []
      },
      queryFormRule: {
        queryVal1: [
          {
            required: true,
            message: "单选下拉框的值不能为空",
            trigger: "change"
          }
        ],
        queryVal2: [
          {
            required: true,
            message: "多选下拉框的值不能为空不能为空",
            trigger: "change",
            type: "array"
          }
        ]
      },
      treeDataNew: [
        
      ],
      treeData: [
        {
          title: "中国",
          expand: true,
          value: "1",
          children:[]
        },
        {
          title: "中国1",
          expand: true,
          value: "2",
          children: [
            {
              title: "中国11",
              expand: true,
              value: "21",
              children:[]
            }
          ]
        },
        {
          title: "中国2",
          expand: true,
          value: "3",
          children:[]
        },
        {
          title: "中国3",
          expand: true,
          value: "4",
          children:[]
        },
        {
          title: "中国4",
          expand: true,
          value: "5",
          children:[]
        }
      ]
    };
  },
  beforeMount() {
    this.getdepartments();
  },
  methods: {
    getdepartments() {
      axios({
        method: "get",
        url: this.IP.IP + "/getDepartments"
      }).then(result => {
        // console.info("部门信息");
        //console.log(result);
        var data = result.data.data;
        var i = 0;
        for (i = 0; i < data.length; i++) {
          this.treeDataNew.push({
            title: data[i].nodeDepartmentIndex.name,
            expand: true,
            value: data[i].nodeDepartmentIndex.id + "",
            children: []
          });
          if (data[i].childrenDepartmentIndexes) {
            this.setNode(
              data[i].childrenDepartmentIndexes,
              this.treeDataNew[i].children
            );
          }
        }
        console.log("tree111", this.treeDataNew);
      });
    },
    setNode(node, children) {
      var i = 0;
      for (i = 0; i < node.length; i++) {
        children.push({
          title: node[i].nodeDepartmentIndex.name,
          expand: true,
          value: node[i].nodeDepartmentIndex.id + "",
          children: []
        });
        if (node[i].childrenDepartmentIndexes) {
          this.setNode(node[i].childrenDepartmentIndexes, children[i].children);
        }
      }
    },
    checkForm() {
      this.$refs["queryForm"].validate(valid => {
        if (valid) {
        }
      });
      setTimeout(() => {
        this.loading = false;
        this.$nextTick(() => {
          this.loading = true;
        });
      }, 1000);
    }
  }
};
</script>

<style></style>
